<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>百万圆广告首页</title>
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/Homepage.css">
    <link rel="stylesheet" type="text/css" href="css/bubble/BubbleBgStyle.css"/>

    <style>
        html,
        body {
            border: none;
            overflow: hidden;
            height: 100%;
        }

        body {
            /*background: url(img/bg.jpg);*/
            background-size: 100% 100%;
        }

        div {
            background-size: 100% 100%;
        }

        @keyframes flicker {
            0% {
                opacity: 1;
            }
            25% {
                opacity: 1;
            }
            50% {
                opacity: 1;
            }
            75% {
                opacity: 1;
            }
            100% {
                opacity: 1;
            }
        }
    </style>

    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>

    <script src="js/ManagerHomePage/Bubbles.js"></script>
    <script src="js/ManagerHomePage/VueForBubbles.js"></script>
    <script>
        /**
         * 全屏切换
         * @param {Object} elem
         */
        function toggleFS(elem) {
            var tag = Boolean(elem.getAttribute('tag') == 'true');
            (!tag ? rfs : efs)();
            elem.setAttribute('tag', tag ? false : true);
        }

        //进入全屏
        function rfs() {
            var de = document.documentElement;
            if (de.requestFullscreen)
                de.requestFullscreen();
            if (de.mozRequestFullScreen)
                de.mozRequestFullScreen();
            if (de.webkitRequestFullScreen)
                de.webkitRequestFullScreen();
        };

        //退出全屏
        function efs() {
            var d = document;
            if (d.exitFullscreen)
                d.exitFullscreen();
            if (d.mozCancelFullScreen)
                d.mozCancelFullScreen();
            if (d.webkitCancelFullScreen)
                d.webkitCancelFullScreen();
        };
    </script>

</head>

<body ondblclick="toggleFS(this)">

<div class="navbar">
    <input type="checkbox" id="checkbox">
    <label for="checkbox" class="titleLabel">
        <i class="fa fa-bars" aria-hidden="true"></i>
    </label>
    <ul>
        <div id="icon">
    		 <li>
	            <img :src="user.icon" alt="">
	            <span>欢迎您！{{user.nickname}}</span>
	        </li>
    	</div>
        <li>
            <a href="#">
                <i class="fa fa-home" aria-hidden="true"></i>
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="Manager-HotAd-Page.html">
                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                <span>本月热门</span>
            </a>
        </li>
        <li>
            <a href="Manager-Info-Page.html">
                <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                <span>个人中心</span>
            </a>
        </li>
        <li>
            <a href="Manager-Buy-Page.html">
                <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                <span>购买广告</span>
            </a>
        </li>
		<li>
			<a href="Manager-user-list.html">
				<i class="fa fa-users" aria-hidden="true"></i>
				<span>用户列表</span>
			</a>
		</li>
		<li>
			<a href="Manager-advlist.html">
				<i class="fa fa-sitemap" aria-hidden="true"></i>
				<span>广告列表</span>
			</a>
		</li>
        <li>
            <a href="Manager-Chat-Page.html">
                <i class="fa fa-comments" aria-hidden="true"></i>
                <span>聊天窗口</span>
            </a>
        </li>
		<li onclick="Logout()">
			<a href="javascript:void(0)">
				<i class="fa fa-sign-out" aria-hidden="true" style="transform: rotate(180deg);"></i>
				<span>退出登录</span>
			</a>
		</li>
    </ul>

    <div id="bubbles" class="main container">
        <!--<div class="container">-->
        <div class="bubble" style="--i:1"></div>
        <div class="bubble" style="--i:2"></div>
        <div class="bubble" style="--i:3"></div>
        <div class="bubble" style="--i:4"></div>
        <div class="bubble" style="--i:5"></div>
        <div class="bubble" style="--i:6"></div>
        <div class="bubble" style="--i:7"></div>
        <div class="bubble" style="--i:8"></div>
        <div class="bubble" style="--i:9"></div>
        <div class="bubble" style="--i:10"></div>
        <div class="bubble" style="--i:11"></div>
        <div class="bubble" style="--i:12"></div>
        <div class="bubble" style="--i:13"></div>
        <div class="bubble" style="--i:14"></div>
        <div class="bubble" style="--i:15"></div>
        <div class="bubble" style="--i:16"></div>
        <div class="bubble" style="--i:17"></div>
        <div class="bubble" style="--i:18"></div>
        <!--</div>-->
        Bubbles!!!!!!!!!!!!!
    </div>
</div>

</body>

<script src="js/GetInfo.js"></script>

<script>
    function Logout() {
        var flag = window.confirm("确定退出登录吗？");
        if (flag) {
            window.location.href = "AdInfo?type=logout";
        }
    }
</script>


</html>